<template>
    <div class="page">
        <div class="head-box">
            <div class="name-box">
                <strong>{{userInfo.name}}</strong>
                <p v-if="userInfo.sex == 1">性别：男</p>
                <p v-if="userInfo.sex == 2">性别：女</p>
            </div>
            <img :src="userInfo.avatar">
        </div>
        <div class="item-box" @click="userInfoTap()">
            <p>基本信息</p>
            <img src="./img/nav.png">
        </div>
        <div class="item-box" @click="userFileTap()">
            <p>健康档案</p>
            <img src="./img/nav.png">
        </div>
        <div class="item-box" @click="userRecordTap()">
            <p>诊疗记录</p>
            <img src="./img/nav.png">
        </div>
        <div class="item-box" @click="userServiceTap()">
            <p>联系客服</p>
            <img src="./img/nav.png">
        </div>
    </div>
</template>
<script>
    import { getUserInfo } from '../../api/mine'
    export default {
        data() {
            return {
                userInfo: {}
            }
        },
        created() {
            getUserInfo().then(res=> {
                this.userInfo = res.data
            })
        },
        methods: {
            userInfoTap: function () {
                this.$router.push({
                    path: "/mine/user"
                })
            },
            userFileTap: function () {
                this.$router.push({
                    path: "/mine/files"
                })
            },
            userRecordTap: function () {
                this.$router.push({
                    path: "/mine/record"
                })
            },
            userServiceTap: function () {
                this.$router.push({
                    path: "/mine/service"
                })
            }
        }
    }
</script>
<style scoped type="text/stylus" lang="stylus">
    .page
        width 100%
        height 100%
        background #FFF
        padding-bottom 1.43rem
        .head-box
            width 91%
            padding 0 4% 0 5%
            height 4.4rem
            display flex
            justify-content space-between
            align-items center
            img
                width 1.6rem
                height 1.6rem
                border-radius 50%
            .name-box
                color #327A8A
                strong
                    font-size 0.64rem
                p
                    font-size 0.37rem
                    margin-top 0.2rem
        .item-box
            width 92%
            height 1.17rem
            padding 0 4%
            display flex
            justify-content space-between
            align-items center
            margin-bottom 0.03rem
            background #42A7BD
            color #FFF
            font-size 0.4rem
            img
                width 0.21rem
                height 0.35rem
</style>
